<template>
  <j-modal :title="title" :width="width" :visible="visible" switchFullscreen @ok="handleOk" :footer="null"
    @cancel="handleCancel" :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" dialogClass="dialogClass">
    <j-form-container>
      <a-form-model ref="form" :model="queryParams" slot="detail" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="区域" prop="areaId">
              <j-select-area placeholder="请选择区域" v-model="queryParams.areaId" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="终端" class="ant-form-item-required" prop="terminalId">
              <!-- <a-select v-model="queryParams.terminalId" show-search allowClear placeholder="请选择"
              :default-active-first-option="false" :show-arrow="false" :not-found-content="null"
              option-filter-prop="children" @change="handleTerminalSelected">
              显示终端名称+编号
              <a-select-option :value="undefined">请选择</a-select-option>
              <a-select-option v-for="item in terminalList" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select> -->
              <a-input v-model="queryParams.terminalId" placeholder="请输入终端名称"></a-input>

            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-button type="primary">查询</a-button>
            <a-button style="margin-left: 12px">重置</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <a-table :columns="columns" :data-source="tableData" :pagination="ipagination">
      <template slot="omStatus" slot-scope="text, record, index">
        <div class="statusTagSty">{{["已处理","未处理","超时未处理"][record.omStatus - 1]}}</div>
      </template>
      <template slot="handlePic">
        <a-button type="link">查看图片</a-button>
      </template>
    </a-table>
    <!-- <terminal-facility-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></terminal-facility-form> -->
  </j-modal>
</template>

<script>
import { getOmList } from '@/api/psOm'
import {
  getStatisticDevice,
  getStatisticTerminal,
  getStatisticOmOverview,
  getStatisticOmType,
  getStatisticOm,
  getTerminalEnergyRank,
  getDeviceAlarmRank,
  getEnterpriseRank

} from '@/api/statistic'
// import TerminalFacilityForm from './TerminalFacilityForm'
export default {
  name: 'TerminalRankDialog',
  components: {
    // TerminalFacilityForm
  },
  data() {
    return {
      areaId:'',
      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      columns: [
        {
          title: '区域',
          dataIndex: 'areaId',
          key: 'areaId',
          align: 'center'
        },
        {
          title: '关联终端',
          dataIndex: 'terminalName',
          key: 'terminalName',
          align: 'center'
        },
        {
          title: '设备名称',
          dataIndex: 'deviceName',
          key: 'deviceName',
          align: 'center'
        },
        {
          title: '累计报警次数',
          dataIndex: 'alarmCount',
          key: 'alarmCount',
          align: 'center'
        },
      ],
      labelCol: { span: 7 },
      wrapperCol: { span: 15 },
      queryParams: {},
      title: '设备异常',
      width: 720,
      visible: false,
      disableSubmit: false,
      tableData: []
    }
  },
  watch: {
    visible: {
      handler: function (val) {
        if (val) {
          this.getList(this.areaId)
        }
      }
    },
    immediate: true
  },
  methods: {
    getList(areaId) {
       getDeviceAlarmRank({ areaId }).then(res => {
        console.log(res, 'res--设备告警排名')
        this.tableData = res.data
      })
    },
    add() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.realForm.add();
      })
    },
    edit(record) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.realForm.edit(record);
      })
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleOk() {
      this.$refs.realForm.submitForm();
    },
    submitCallback() {
      this.$emit('ok');
      this.visible = false;
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>
<style lang="less">
.dialogClass {
  color: red;
  .ant-modal-header {
    text-align: center;
    background-image: url('../../../../assets/statistic/dialogTitleBg.png');
    background-size: 100% 100%;
    .ant-modal-title {
      color: #fff;
    }
  }
  .ant-modal-close {
    color: #fff !important;
  }
}
</style>